<template>
  <body>
  <div class="background">
    <img src="static/background.jpg" width="100%" height="100%" alt=""/>
  </div>
  <el-page-header @back="goBack" content="图书编辑" style="margin-top: -2%">
  </el-page-header>
  <div>
    <el-card class="card1">
      <h2>编辑信息</h2>
      <el-form autocomplete="on"
               :model="book"
               ref="book"
               label-position="left"
               :rules="rules"
               label-width="100px">
        <el-form-item style="margin-top: 5%" prop="bookName" label="书名" class="label-style label-content">
          <el-input name="bookName"
                    v-model="book.bookName"
                    autocomplete="on"
                    placeholder="请输入书名"
                    style="font-size: 18px">
          </el-input>
        </el-form-item>
        <el-form-item prop="author" label="作者" class="label-style label-content">
          <el-input name="author"
                    v-model="book.author"
                    autocomplete="on"
                    placeholder="请输入作者"
                    style="font-size: 18px">
          </el-input>
        </el-form-item>
        <el-form-item prop="img" label="封面" class="label-style label-content">
          <el-input name="img"
                    v-model="book.img"
                    autocomplete="on"
                    placeholder="请输入封面信息"
                    style="font-size: 18px">
          </el-input>
        </el-form-item>
        <el-form-item label="类型" class="label-style label-content" prop="typeId">
          <el-select style="width: 100%" v-model="value" placeholder="请选择类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              style="font-size: 18px">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="publisher" label="出版社" class="label-style label-content">
          <el-input name="publisher"
                    v-model="book.publisher"
                    autocomplete="on"
                    placeholder="请输入出版社"
                    style="font-size: 18px">
          </el-input>
        </el-form-item>
        <el-form-item prop="price" label="价格(元)" class="label-style label-content">
          <el-input name="price"
                    v-model="book.price"
                    autocomplete="on"
                    placeholder="请输入价格"
                    style="font-size: 18px">
          </el-input>
        </el-form-item>
        <el-form-item prop="bnumber" label="数量(本)" class="label-style label-content">
          <el-input name="bnumber"
                    v-model="book.bnumber"
                    autocomplete="on"
                    placeholder="请输入数量"
                    style="font-size: 18px">
          </el-input>
        </el-form-item>
        <el-form-item prop="summary" label="简介" class="label-style label-content">
          <el-input name="summary"
                    type="textarea"
                    :rows="4"
                    v-model="book.summary"
                    style="height: 100%;font-size: 18px"
                    autocomplete="on"
                    placeholder="请输入简介">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="background: darkslateblue;font-size: 18px;margin-left: -15%"
            type="primary"
            @click.native.prevent="add"
          >修改
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  </body>
</template>

<script>
  export default {
    data() {
      return {
        book: {
          bookId: '',
          typeId: '',
          img: '',
          bookName: '',
          author: '',
          publisher: '',
          price: '',
          summary: '',
          bnumber: ''
        },
        rules: {
          typeId: [{required: true, message: '类型不能为空', trigger: 'blur'}],
          img: [{required: true, message: '封面不能为空', trigger: 'blur'}],
          bookName: [{required: true, message: '书名不能为空', trigger: 'blur'}],
          author: [{required: true, message: '作者不能为空', trigger: 'blur'}],
          publisher: [{required: true, message: '出版社不能为空', trigger: 'blur'}],
          price: [{required: true, message: '价格不能为空', trigger: 'blur'}],
          summary: [{required: true, message: '简介不能为空', trigger: 'blur'}],
          bnumber: [{required: true, message: '数量不能为空', trigger: 'blur'}]
        },
        options: [{
          value: '1',
          label: '历史'
        }, {
          value: '2',
          label: '小说'
        }, {
          value: '3',
          label: '地理'
        }, {
          value: '4',
          label: '传记'
        }, {
          value: '5',
          label: '哲学'
        }, {
          value: '6',
          label: '社会学'
        }, {
          value: '7',
          label: '艺术'
        }, {
          value: '8',
          label: '政治'
        }, {
          value: '9',
          label: '建筑'
        }, {
          value: '10',
          label: '戏剧'
        }, {
          value: '11',
          label: '音乐'
        }, {
          value: '12',
          label: '军事'
        }, {
          value: '13',
          label: '数学'
        }, {
          value: '14',
          label: '美术'
        }, {
          value: '15',
          label: '设计'
        }, {
          value: '16',
          label: '佛教'
        }
        ],
        value: '1'
      };
    },
    created() {
      this.load();
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      add() {
        this.$refs.book.validate(valid => {
          if (valid) {
            this.$confirm('是否确认修改？', '提示', {
            }).then(() => {
              this.book.typeId=this.value;
              this.$axios.post('/library/updateB', this.book)
                .then(resp => {
                  if(resp.data.code==200){
                    this.$alert("修改成功!", '提示', {
                      confirmButtonText: '确定'
                    });
                    this.load();
                  }
                });
            }).catch(() => { this.$message({
              message: '取消修改',
              type: 'failed'
            })});
          } else {
            // eslint-disable-next-line no-console
            console.log("参数验证不合法！");
            return false;
          }
        });
        },
      load(){
        this.$axios.post('/library/editB/' + this.$route.query.bookId)
          .then(resp => {
            if (resp.data.code == 200) {
              this.book = resp.data.data;
              this.value=this.options[this.book.typeId-1].value;
            }
          });
      }
      }
    };
</script>

<style>
  .background {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }

  .card1 {
    position: relative;
    width: 800px;
    margin-top: 0%;
    margin-left: 27%;
    padding: 1em;
    background: hsla(0, 0%, 50%, .25) border-box;
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
  }

  .label-style .el-form-item__label {
    font-size: 18px;
  }

  .label-content .el-form-item__content {
    font-size: 20px;
    color: #000000;
  }

  .el-input.is-disabled /deep/ .el-input__inner {
    color: #000000;
  }
</style>
